body {
  background-color: #F5F5F5;
  height: 100%;
  width: 100%;
}
html{
  font-size: 20px;
}
* {
  margin: 0;
  padding: 0;
}

p{
  padding: 0;
  margin: 0;
}
a {
  display: block;
}
.dis-in-b{
  display: inline-block;
}

ul {
  list-style: none;
}
/*flex布局*/

/*隐藏滚动条*/
.scrollbar {
  width: 100%;
  overflow: scroll;
  overflow-x: hidden;
  &::-webkit-scrollbar { /*隐藏滚轮*/
    display: none;
  }
}

.flex {
  display: flex;
  /*垂直居中*/
  &.col-center{
    align-items: center;
  }
  &.row-left{
    justify-content: flex-start;
  }
  &.row-right{
    justify-content: flex-end;
  }
  &.column {
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
  }
  &.item,>.item{
    position: relative !important;
  }
  &.item.one,>.item.one{
    flex: 1 !important;
  }
  &.item.two,>.item.two{
    flex: 2 !important;
  }
  &.item.three,>.item.three{
    flex: 3 !important;
  }
  &.item.four,>.item.four{
    flex: 4 !important;
  }
  &.item.five,>.item.five{
    flex: 5 !important;
  }
}
/*折行布局*/
.flex-wrap{
  flex-wrap: wrap;
}
.min-width{
  min-width: 200px;
}

.left-bar {
  width: 5.5rem;
  /*margin-right: .2rem;*/
  background-color: #f4f4f4;
  ul {
    width: 100%;
    li {
      a:link, a:visited, a:hover, a:active {
        color: #3d4145;
      }
      a{
        padding: .5rem.25rem;
        font-size: .7rem;
        border-bottom: 1px solid #ddd;
      }
      a:visited,a:active{
        background-color: #fff;
      }
      a.active {
        background-color: #FFF;
      }
      i {
        font-style: normal;
        font-size: .7rem;
        display: inline-block;
        height: 1.2rem;
        width: 1.2rem;
        line-height: 1.2rem;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        margin-right: 5px;
      }
    }
  }
}

.main-content {
  background-color: #f3f3f3;
}

.bar{
  position: relative;
  .title{
    background-color: #0894ec !important;
    color: #fff;
  }
  .icon{
    color: #fff;
  }
}

/*公用背景色*/
.bg-primary {
  background-color: #66A6D1 !important;
}

.bg-waring {
  background-color: #ff8408 !important;
}

.bg-info {
  background-color: #a34cff !important;
}

.bg-deep-info {
  background-color: #9933CC !important;
}

.bg-green {
  background-color: #390 !important;
}

.bg-light-green {
  background-color: #97D176 !important;
}

.bg-pink {
  background-color: #FFCCFF !important;
}

.bg-gray {
  background-color: #797979 !important;
}

.bg-light{
  background-color: #E9E9E9 !important;
}
.bg-white{
  background-color: #fff !important;
}

.bg-blue-light {
  background-color: #DEEDF2 !important;
}


/*公用字体颜色*/
.c-red{
  color: #cd6a6a !important;
}
.c-green{
  color: #18A689 !important;
}
.c-blue{
  color: #00A2D9 !important;
}
.c-purple{
  color: #B57EE0 !important;
}

/*公用字体大小*/
.f-14{
  font-size: .7rem !important;
}
.f-16{
  font-size: .8rem !important;
}
.f-18{
  font-size: .9rem !important;
}
.f-20{
  font-size: 1rem !important;
}
.f-22{
  font-size: 1.1rem !important;
}
.f-24{
  font-size: 1.2rem !important;
}

.border-b {
  border-bottom: 1px solid #eee;
}

.border-no{
  border: none !important;
}

.p-l-15 {
  padding-left: 15px !important;
}
.p-10{
  padding: 10px !important;
}

.p-t-0{
  padding-top: 0 !important;
}

.p-r-15 {
  padding-right: 15px !important;
}
.m-t-10{
  margin-top: 10px !important;
}
.m-b-10{
  margin-bottom: 10px !important;
}

.m-0{
  margin: 0 !important;
}

.m-t-0{
  margin-top: 0 !important;
}

.m-t-15 {
  margin-top: 15px !important;
}
.m-l-15{
  margin-left: 15px !important;
}
.m-r-15{
  margin-right: 15px !important;
}

.m-b-15 {
  margin-bottom: 15px !important;
}
.m-b-0{
  margin-bottom: 0 !important;
}
.p-15 {
  padding: 15px !important;
}
.p-b-0{
  padding-bottom: 0 !important;
}

.m-15 {
  margin: 15px !important;
}

.p-5{
  padding: 5px !important;
}

.t-center{
  text-align: center !important;
}


/*按钮区*/
.h-btns{
  border-bottom: 1px solid #eee;
  padding: 10px 5px;
  .button{
    display: inline-block;
    margin-right: 5px;
    color: inherit;
    &.button-fill{
      color: #fff;
    }
  }
}


/*筛选区*/
.screen{
  position: relative;
  background-color: #fff;
  .searchbar{
    padding: .5rem .25rem;
  }
  .screen-item{
    font-size: .75rem;
    padding: .5rem .25rem;
    .button{
      display: inline-block;
      margin-right: .2rem;
      color: inherit;
      &.button-fill{
        color: #fff;
      }
    }
    input.date{
      width: 4.5rem;
    }
    input{
      font-size: .6rem !important;
      height: 1.4rem !important;
      width: 8rem;
      line-height: 1;
      padding: 5px 10px;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: .15rem;
      background-color: #fff;
      border: 1px solid #ddd;
      color: #555;
    }
  }
  .screen-btns{
    .button{
      color: inherit;
      display: inline-block;
      margin-bottom: .5rem;
      &.button-fill{
        color: #fff;
      }
      &.active{
        color: #fff;
        background-color: #0894ec;
        border-color: #0894ec;
      }
    }
  }
  .times{
    margin-right: .2rem;
    margin-bottom: .5rem;
    input.date{
      height: 1.35rem !important;
    }
  }
  .screen-end {
    text-align: center;
    .op-btn{
      display: inline-block;
      padding: 0 15px;
      font-size: .65rem;
      .icon{
        margin-right: .25rem;
        position: relative;
        color: #9b9b9b;
      }
    }
  }
}